<template>
  <div>
    <div class="wrap">
      <div class="photo">
        <img src='../../../../static/img/图片@1x.png'>
        <p>胡杨</p>
      </div>
      <!-- <span class="iconfont icon-weixinxiaochengxu"></span> -->
      <div class="wrap_header animate__animated animate__bounceInDown">
        <div class="wrap_headerTitle">
          <div class="_title">
            <div class="_text">
              <div class="_text_row">
                <img src="../../../../static/img/图片 2 Copy@1x.png" />
              </div>
              <div class="_text_row">
                <span>Moco会员</span>
                <a>畅听千万新故事</a>
              </div>
              <div class="_text_row">
                <button class="btn">续费</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrap_menu">
        <div class="wrap_menuRow">
          <div class="wrap_menuRow_grid">
            <span class="span">
              <i class="iconfont icon-experiment-fill"></i>
            </span>
            <span class="span">我的故事</span>
          </div>
          <div class="wrap_menuRow_grid">
            <span class="span">
              <i class="iconfont icon-shopping_bag"></i>
            </span>
            <span class="span">我的购买</span>
          </div>
          <div class="wrap_menuRow_grid">
            <span class="span">
              <i class="iconfont icon-lianxiaolianmanyi-3"></i>
            </span>
            <span class="span">邀请好友</span>
          </div>
          <div class="wrap_menuRow_grid">
            <span class="span">
              <i class="iconfont icon-liwu"></i>
            </span>
            <span class="span">赠送好友</span>
          </div>
        </div>

        <div class="wrap_menuRow">
          <div class="wrap_menuRow_grid">
            <span class="span">
              <i class="iconfont icon-ziyuan1"></i>
            </span>
            <span class="span">优惠券</span>
          </div>
          <div class="wrap_menuRow_grid">
            <span class="span">
              <i class="iconfont icon-iconpoint-copy"></i>
            </span>
            <span class="span">Maco蛋</span>
          </div>

          <div class="wrap_menuRow_grid">
            <span class="span">
              <i class="iconfont icon-erji"></i>
            </span>
            <span class="span">在线客服</span>
          </div>
          <div class="wrap_menuRow_grid">
            <span class="span">
              <i class="iconfont icon-icon_xiaohai"></i>
            </span>
            <span class="span">宝贝模式</span>
          </div>
        </div>
      </div>
      <div class="wrap_down">
        <div class="wrap_down_container">
          <span class="backLogin">退出登入</span>
        </div>
      </div>
      <Bottom></Bottom>
    </div>
  </div>
</template>
<script>
  import Bottom from '../../../components/bottom/index.vue'
export default {
  data() {
    return {};
  },
  components:{Bottom}
};
</script>
<style scoped>
@import url("../../../assets/font/iconfont.css");
.wrap_menuRow_grid {
  flex: 1;
  text-align: center;
  animation: ball 0.5s;
}
/* 此处是动画别动 */
@keyframes ball {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
.wrap {
  width: 414px;
  height: 736px;
  background-color: #f7f7f7;
  overflow: hidden;
  position: relative;
}
.wrap_header {
  width: 100%;
  height: 284px;
  background-color: #09d0b3;
  border-radius: 0 0 120px 120px;
  position: relative;
  padding: 5px;
}
.icon-weixinxiaochengxu {
  color: #e8e8e8;
  font-size: 27px;
  position: absolute;
  right: 15px;
  top: 35px;
  z-index: 500;
}
._title {
  margin: 0 auto;
  margin-top: 80px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
}
.photo {
  position: absolute;
  z-index: 500;
  left:180px;
  top: 90px;
  text-align: center;
  color: white;
}
._text {
  width: 300px;
  height: 38px;
  background-color: #ffc700;
  border-radius: 10px 10px 0 0;
  position: absolute;
  bottom: -85px;
  right: -130px;
  display: flex;
  border: 1px solid #fff;
}
._text_row {
  text-align: center;
  line-height: 38px;
  vertical-align: middle;
  color: white;
}
._text_row img {
  vertical-align: middle;
}
._text_row:nth-child(1) {
  flex: 0.2;
}
._text_row:nth-child(1) i {
  font-size: 20px;
  flex: 0.2;
}
._text_row:nth-child(2) {
  flex: 0.5;
}
._text_row:nth-child(2) span {
  flex: 0.2;
  font-weight: bold;
}
._text_row:nth-child(3) {
  flex: 0.3;
}
._text_row:nth-child(3) button {
  display: inline-block;
  border: none;
  border-radius: 35px;
  width: 85%;
  height: 20px;
  background: #fe0070;
  color: white;
  font-weight: bold;
}
/* 菜单样式 */
.wrap_menu {
  width: 100%;
  height: 196px;
  background-color: #fff;
  border-radius: 10px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 232px;
}
.wrap_menuRow {
  flex: 1;
  display: flex;
  justify-content: space-around;
}
.wrap_menuRow:nth-child(1) .wrap_menuRow_grid:nth-child(1) span:nth-child(1) {
  background-color: #09d0b3;
}
.wrap_menuRow:nth-child(1) .wrap_menuRow_grid:nth-child(2) span:nth-child(1) {
  background-color: #ff765c;
}
.wrap_menuRow:nth-child(1) .wrap_menuRow_grid:nth-child(3) span:nth-child(1) {
  background-color: #fea235;
}
.wrap_menuRow:nth-child(1) .wrap_menuRow_grid:nth-child(4) span:nth-child(1) {
  background-color: #b7a9ff;
}

.wrap_menuRow:nth-child(2) .wrap_menuRow_grid:nth-child(1) span:nth-child(1) {
  background-color: #fe7b5d;
}
.wrap_menuRow:nth-child(2) .wrap_menuRow_grid:nth-child(2) span:nth-child(1) {
  background-color: #55d0f1;
}
.wrap_menuRow:nth-child(2) .wrap_menuRow_grid:nth-child(3) span:nth-child(1) {
  background-color: #f15fb0;
}
.wrap_menuRow:nth-child(2) .wrap_menuRow_grid:nth-child(4) span:nth-child(1) {
  background-color: #10dca1;
}

.wrap_menuRow_grid .span {
  width: 100%;
  display: inline-block;
}
.wrap_menuRow_grid .span:nth-child(2) {
  font-size: 13px;
}
.wrap_menuRow_grid .span i {
  line-height: 38px;
  color: white;
}
.wrap_menuRow_grid .span:nth-child(1) {
  margin-top: 17px;
}
.wrap_menuRow_grid .span:nth-child(1) {
  width: 38px;
  height: 38px;
  background-color: #11dba9;
  border-radius: 50%;
}
.wrap_down {
  width: 100%;
  height: 276px;
  margin: 160px 0;
}
.wrap_down_container {
  width: 100%;
  text-align: center;
  padding-top: 10px;
}
.backLogin {
  display: inline-block;
  width: 80%;
  height: 31px;
  background: #ffff;
  border-radius: 35px;
  text-align: center;
  line-height: 31px;
}
.wrap_headerLeft_over span {
  font-size: 27px;
  color: white;
  position: absolute;
  right: 22px;
  top: 35px;
}
</style>